perf: lazy-load Mermaid, YouTube, and TwitterTweetEmbed (#5667, #3186) - #5679

-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
@@
-export default function MermaidDiagram({
-  chart,
-  id = 'mermaid-diagram',
-  style,
-  className,
-}: MermaidDiagramProps) {
+export default function MermaidDiagram({ graph, id, style, className }: Readonly<MermaidDiagramProps>) {
+  const reactId = useId();
+  const diagramId = id ?? `mermaid-${reactId.replace(/:/g, '')}`;
   const containerRef = useRef<HTMLDivElement>(null);

Then use diagramId in mermaidAPI.render, the effect dependencies, and the container id.

🏁 Script executed:

#!/bin/bash
# Description: Check the declared and locked mermaid version, and existing render call sites.
fd -H -t f 'package.json' -d 2 --exec grep -n '"mermaid"' {} \;
fd -H -t f 'package-lock.json' -d 1 --exec grep -n -A3 '"node_modules/mermaid"' {} \;
rg -nP '\bmermaid(API)?\.(render|initialize)\s*\(' --type=ts --type=tsx --type=js

Repository: asyncapi/website

Length of output: 487

🌐 Web query:

mermaid 9.3.0 mermaid.render return value promise or string

💡 Result:

In Mermaid version 9.3.0, the mermaid.render function returns a Promise [1][2]. This Promise resolves to a RenderResult object [1][2][3], which contains the following properties: - svg (string): The generated SVG code [1][4]. - bindFunctions (function, optional): A function that, when called with an element as an argument, binds necessary event listeners (like tooltips or clicks) to the rendered diagram [3][5][4]. - diagramType (string): The type of diagram that was rendered (e.g., 'flowchart', 'sequence') [1][4]. Usage example: const { svg, bindFunctions, diagramType } = await mermaid.render('myId', 'graph TD; A-->B'); document.getElementById('output').innerHTML = svg; bindFunctions?.(document.getElementById('output')); Note that mermaid.render in version 9.3.0 handles the queueing of rendering tasks, ensuring that multiple calls are executed serially to prevent race conditions, unlike the internal mermaidAPI.render method which executes immediately [2].

Citations:

• 1: https://mintlify.wiki/mermaid-js/mermaid/api/mermaid
• 2: https://mintlify.wiki/mermaid-js/mermaid/api/mermaid-api
• 3: https://www.mintlify.com/mermaid-js/mermaid/advanced/rendering-options
• 4: https://www.mintlify.com/mermaid-js/mermaid/api/types/render-result
• 5: https://mermaid.ai/open-source/config/usage.html

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "repo files count:"
git ls-files | wc -l

echo
echo "find mermaid-related package files:"
git ls-files | rg '(^|/)(package\.json|package-lock\.json|yarn.lock|pnpm-lock.yaml)$' || true

echo
echo "mermaid mentions in package manifests/locks:"
for f in $(git ls-files | rg '(^|/)(package\.json|package-lock\.json|yarn.lock|pnpm-lock.yaml)$'); do
  printf '\n--- %s ---\n' "$f"
  rg -n '"mermaid"|mermaid' "$f" | head -80 || true
done

echo
echo "MermaidDiagram outline and relevant source:"
if git ls-files | rg -q 'components/MDX/MermaidDiagram.tsx'; then
  wc -l components/MDX/MermaidDiagram.tsx
  cat -n components/MDX/MermaidDiagram.tsx | sed -n '1,180p'
else
  fd -i 'MermaidDiagram' .
fi

echo
echo "render call sites in tracked TS/TSX/JS files:"
git ls-files | rg '\.(ts|tsx|js|jsx)$' | xargs -r rg -n '\bmermaid(API)?\.(render|initialize)\s*\(' || true

Repository: asyncapi/website

Length of output: 1084

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "package manager indicators:"
git ls-files | rg '(^|/)(package-lock\.json|yarn\.lock|pnpm-lock\.yaml|bun\.lockb|bun\.lock)$' || true

for name in npm_package_lockfile npm yarn pnpm bun; do
  [ -f package.json ] || continue
  python3 - <<'PY'
import json
from pathlib import Path

p=json.loads(Path("package.json").read_text())
print("name:", p.get("name"))
print("engines:", p.get("engines"))
print("volta:", p.get("volta"))
print("packageManager:", p.get("packageManager"))
print("workspaces:", p.get("workspaces"))
PY
done

echo
echo "Mermaid API import/export shape in lockfile:"
sed -n '20740,20755p' package-lock.json

echo
echo "Import statement:"
sed -n '1,20p' components/MDX/MermaidDiagram.tsx

Repository: asyncapi/website

Length of output: 1823

🌐 Web query:

Mermaid 9.3.0 source mermaidAPI.render TypeScript

💡 Result:

In Mermaid version 9.3.0, the mermaidAPI.render function is available but is marked as deprecated for external use in favor of the high-level mermaid.render function [1][2]. TypeScript Usage and Characteristics: 1. Deprecation Status: The mermaidAPI.render function includes a @deprecated JSDoc tag explicitly recommending the use of mermaid.render instead [1]. 2. Function Signature (v9.3.0): The mermaidAPI.render function is traditionally signatured to accept a callback [3][4]: render(id: string, text: string, cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void, svgContainingElement?: Element) => string; 3. Behavior: Unlike the high-level mermaid.render function, which wraps rendering in an asynchronous queue to prevent race conditions during concurrent calls, mermaidAPI.render executes immediately [5][2]. Recommendation: For integration, you should prefer the top-level mermaid.render function. If you must use mermaidAPI.render, be aware that it lacks automatic queuing and error handling, making it susceptible to race conditions if called multiple times concurrently [5][2]. Note that mermaidAPI is intended for internal library use and its interface is subject to change or removal in future major versions [1][5][2].

Citations:

• 1: https://github.com/mermaid-js/mermaid/blob/2a51ae43/packages/mermaid/src/mermaidAPI.ts
• 2: Confusion between render() exposed by "mermaid" and "mermaidAPI" mermaid-js/mermaid#4369
• 3: https://github.com/mermaidjs/mermaidjs.github.io/blob/master/mermaidAPI.md
• 4: https://github.com/mermaid-js/mermaid/blob/33f78a54294e92898d35edc5d76664a8e1e50115/packages/mermaid/src/mermaidAPI.ts
• 5: https://mintlify.wiki/mermaid-js/mermaid/api/mermaid-api

🌐 Web query:

site:github.com mermaid-js/mermaid v9.3.0 mermaidAPI render

💡 Result:

In Mermaid v9.3.0, the mermaidAPI.render function is available but is marked as deprecated for external use [1][2][3]. The official recommendation is to use the mermaid.render function instead [1][2][4][3]. The mermaidAPI.render function was historically used to render diagram text into an SVG element [5][6]. However, it is explicitly flagged as deprecated in the source code of v9.3.0 with the following guidance: "use the mermaid.render function instead of mermaid.mermaidAPI.render" [1][2][3]. Key considerations for v9.3.0: 1. Recommended Practice: Developers are encouraged to use the top-level mermaid.render function. This is because the top-level function provides safer handling, such as wrapping rendering calls in an asynchronous queue to prevent conflicts, whereas direct calls to mermaidAPI.render bypass these safeguards [4]. 2. Deprecation Status: While mermaidAPI.render exists in v9.3.0, it is considered internal or legacy, and reliance on it is discouraged in favor of the standard API [1][2]. 3. Usage Pattern (Legacy): Historically, mermaidAPI.render took parameters including an ID, the graph definition text, and a callback function (or an optional SVG containing element) [5][6]. Modern usage with the mermaid.render function is preferred for better compatibility and stability [4].

Citations:

• 1: https://github.com/mermaid-js/mermaid/blob/f0ffb41c/docs/config/setup/mermaid/interfaces/Mermaid.md
• 2: https://github.com/mermaid-js/mermaid/blob/2a51ae43/packages/mermaid/src/mermaidAPI.ts
• 3: https://github.com/mermaid-js/mermaid/blob/9745f325/packages/mermaid/src/mermaidAPI.ts
• 4: Confusion between render() exposed by "mermaid" and "mermaidAPI" mermaid-js/mermaid#4369
• 5: https://github.com/mermaidjs/mermaidjs.github.io/blob/master/mermaidAPI.md
• 6: https://github.com/mermaid-js/mermaid/blob/33f78a54294e92898d35edc5d76664a8e1e50115/packages/mermaid/src/mermaidAPI.ts

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.